<template>
  <!-- 只能有一个根标签 -->
  <div class="container">
    <el-card>
      <!-- 最上面三个 -->
      <el-form :inline="true" :model="pageA" v-loading="loading">
        <el-form-item label="目录名称" prop="directoryName">
          <el-input size="small" v-model="pageA.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select placeholder="请选择" size="small" v-model="pageA.state">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="clear">清除</el-button>
          <el-button type="primary" size="small" @click="search"
            >搜索</el-button
          >
        </el-form-item>
        <el-button
          class="filter-item fr"
          size="small"
          style="margin-left: 10px"
          type="success"
          icon="el-icon-edit"
          @click="getAdd"
          >新增目录</el-button
        >
      </el-form>
      <!-- 数据提示信息 -->
      <el-form>
        <el-alert class="el-icon-info" type="info"
          >数据一共有{{ this.format.total }}条</el-alert
        >
      </el-form>
      <!-- 表格 -->
      <el-table border :data="dataList.items" style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column
          label="目录名称"
          prop="directoryName"
        ></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column
          label="创建日期"
          prop="addDate"
          :formatter="fromatDate"
        ></el-table-column>
        <el-table-column label="面试题数量" prop="totals"></el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="">
          <template slot-scope="scope">
            <el-button type="text" @click="editState(scope.row)">{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="modify(scope.row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="remove(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="text-align: right"
        background
        layout="  prev, pager, next, sizes, jumper"
        :total="format.total"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageA.pagesize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
      <!-- 新增弹框 -->
      <el-dialog
        :visible.sync="showDialog"
        :title="formData.id ? '修改目录':'新增目录'"
        width="60%"
        @close="isCancel"
      >
        <el-form
          :model="formData"
          :rules="rules"
          label-width="100px"
          ref="addsDir"
        >
          <el-form-item label="所属学科" prop="subjectID">
            <el-select
              style="width: 80%"
              placeholder="请选择"
              v-model="formData.subjectID"
            >
              <el-option
                v-for="item in simpleList"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input
              placeholder="请输入目录名称"
              style="width: 80%"
              v-model="formData .directoryName"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <!-- footer插槽 -->
        <el-row type="flex" justify="center" slot="footer">
          <el-col :span="6">
            <el-button size="small" @click="isCancel">取消</el-button>
            <el-button size="small" type="primary" @click="isOk"
              >确认</el-button
            >
          </el-col>
        </el-row>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { getDir, removeDir, changeStateDir, addDir, simple, detailDir, updateDir } from '../../api/hmmm/directorys'

import moment from 'moment'

export default {
  name: '',
  data () {
    return {
      // 显示弹层
      showDialog: false,
      loading: false,
      // 数据列表
      dataList: [],
      pageA: {
        page: 1, // 当前页码
        pagesize: 10, // 页尺寸
        // state: '' // 状态
        directoryName: '',
        state: ''
      },
      format: {
        // 目录名称
        subjectID: '', // 学科Id
        // 状态
        total: 0
      },
      // 定义表单数据
      formData: {

        id: '',
        subjectID: '',
        directoryName: ''
      },
      //   校验规则
      rules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      //   简单目录列表
      simpleList: []
    }
  },
  created () {
    this.getDir()
  },
  mounted () {},
  components: {

  },
  props: {},
  computed: {},
  watch: {},
  methods: {
    // 新增目录
    async getAdd () {
      this.showDialog = true
      simple().then(data => {
        this.simpleList = data.data
      })
    },
    // 修改目录
    modify (id) {
      this.showDialog = true
      simple().then(data => {
        this.simpleList = data.data
      })
      detailDir({ id: id }).then(data => {
        this.formData.id = data.data.id
        this.formData.subjectID = data.data.subjectID
        this.formData.directoryName = data.data.directoryName
      })
    },
    // 清除
    clear () {
      this.pageA.directoryName = ''
      this.pageA.state = ''
    },
    // 搜索
    async search () {
      this.pageA.page = 1
      await this.getDir()
    },
    // 获取数据
    async getDir () {
      // const param = {
      //   page: this.pageA.page,
      //   pagesize: this.pageA.pagesize
      // }
      try {
        const param = {}
        Object.keys(this.pageA).forEach(e => {
          if (this.pageA[e] != null & this.pageA[e] !== '') {
            param[e] = this.pageA[e]
          }
        })
        const { data } = await getDir(param)
        this.dataList = data
        this.format.total = data.counts
      } catch (error) {
        this.$message.error('数据获取失败')
      }
    },
    // 删除目录
    async remove (id) {
      try {
        // console.log(id)
        await removeDir(id)
        await this.getDir(this.pageA)
        this.$message.success('删除成功!')
      } catch (error) {
        this.$message.error('删除失败!')
      }
    },
    // 切换状态
    async editState (row) {
      console.log(row)
      try {
        await changeStateDir({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误!')
      }
    },
    // 格式化时间
    fromatDate (row, column, cellValue, index) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 每页条数
    handleSizeChange (newSize) {
      this.pageA.pagesize = newSize
      this.getDir()
    },
    // 切换页码时，重新显示数据
    handleCurrentChange (newPage) {
      this.pageA.page = newPage
      this.getDir()
    },
    async isOk () {
      try {
        // 校验成功
        await this.$refs.addsDir.validate()
        if (this.formData.id) {
          await updateDir(this.formData)// 调用修改接口
        } else {
          await addDir(this.formData) // 调用新增接口
          // this.$refs.addsDir.resetFields()
        }

        this.getDir(this.pageA)
        this.$message.success('操作成功')
        this.showDialog = false
        // this.$refs.addsDir.resetFields()
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    isCancel () {
      // this.formData = {
      //   subjectID: '',
      //   directoryName: ''
      // }
      this.$refs.addsDir.resetFields()
      this.showDialog = false
      //   this.$parent.showDialog = false
      // this.$emit('update:showDialog', false) // update:props名称这么写在父组件直接用sync修饰符处理
    }
  }
}
</script>

<style scoped>
</style>
